<template>
  <div>
    <van-field
      v-model="phoneNum"
      clearable
      type="text"
      label="账号"
      placeholder="请输入手机号｜账号"
      left-icon="user-o"
      :error-message="phoneNumMessage"
    />
    <van-field
      v-model="userPwd"
      clearable
      type="password"
      label="登陆密码"
      left-icon="lock"
      placeholder="请输入登陆密码"
      :error-message="userPwdMessage"
    />
    <div class="loginContainer">
      <!-- <div class="formItem">
      <img :src="phoneNumIcon" />
      <input type="text" v-model="phoneNum" placeholder="请输入用户名或手机号码" />
    </div>
    <div class="formItem">
      <img :src="userPwdIcon" />
      <input type="password" v-model="userPwd" placeholder="请输入密码" />
      </div>-->
      <div class="forgetPassword" v-if="showForget">
        <router-link :to="{ path: '/user/forgetPassword' }">
          <p>忘记密码</p>
        </router-link>
      </div>
      <div class="btnPay" @click="tologin">立即登录</div>
      <router-link :to="{ path: '/user/register' }">
        <div class="btnPay" style="background-color:#07c160">免费注册</div>
      </router-link>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("user");
import { openconfApi } from "@/api";
import Vue from "vue";
import { phoneReg } from "@/utils/regRex";
export default {
  name: "login",
  mounted() {
    this.$toast.loading({
      mask: true,
      message: "加载中..."
    });
    openconfApi({ key: "verify_chan" }).then(res => {
      if (res.code == 200) {
        this.$toast.clear();
        this.showForget = res.data === "sms" ? true : false;
      }
    });
  },
  data() {
    return {
      showForget: true,
      phoneNum: "",
      phoneNumMessage: "",
      userPwdMessage: "",
      userPwd: ""
    };
  },
  methods: {
    register() {
      this.$router.push({ path: "/user/register" });
    },
    tologin() {
      this.phoneNumMessage = "";
      if (!this.phoneNum) {
        this.phoneNumMessage = "账号不能为空";
      }

      if (!this.userPwd) {
        this.userPwdMessage = "密码不能为空";
      } else if (this.phoneNum) {
        this.Login({
          username: this.phoneNum,
          password: this.userPwd
        })
          .then(res => {
            this.$dispatch("socketConect");
            if (this.$route.query.redirect) {
              this.$router.replace({ path: this.$route.query.redirect });
            } else {
              this.$router.push({ path: "/user" });
            }
          })
          .catch(res => {
            if (res.code === 501) {
              this.$toast({
                message: res.msg,
                duration: 500
              });
            }
          });
      }
    },
    ...mapActions(["Login"])
  }
};
</script>
<style lang="less" scoped>
.forgetPassword {
  text-align: right;
  padding: 0.2rem;
  color: #666;
  p {
    color: #111;
  }
  font: 0.4rem/1.5 "Microsoft YaHei";
}
</style>
